<template>
  <div class="notice">
    <home-page-top/>
    <div class="all-info-c">
      <div class="info-h-lis">
        <ul>
          <li>
            <a href="javascript:void(0)" @click="activeTab = 'system'" :class="{'activeTab':activeTab === 'system'}">系统消息<span v-if="$store.state.me.unReadSysMsg>0" class="info-rem"></span></a>
          </li>
          <img src="../../assets/info-head-line.png">
          <li>
            <a href="javascript:void(0)" @click="activeTab = 'site'" :class="{'activeTab':activeTab === 'site'}">站内消息<span v-if="$store.state.me.unReadSiteMsg>0" class="info-rem"></span></a>

          </li>
          <img src="../../assets/info-head-line.png">
          <li>
            <a href="javascript:void(0)" @click="activeTab = 'setting'" :class="{'activeTab':activeTab === 'setting'}">消息设置</a>
          </li>
          <button v-if="activeTab === 'site'" onclick="window.infoSend()">发消息</button>
        </ul>
      </div>
      <transition name="slideRightInLeftOut" mode="out-in">
        <component :is="view"></component>
      </transition>
    </div>
  </div>
</template>
<script>
import HomePageTop from '@/components/home-page-top'
import System from './system'
import Setting from './setting'
import Site from './site'
export default {
  title: '用户中心-消息',
  data () {
    return {
      dataPoints: null,
      activeTab: 'system',
      viewList: {
        system: System,
        setting: Setting,
        site: Site
      }
    }
  },
  components: {
    HomePageTop,
    System,
    Setting,
    Site
  },
  computed: {
    view () {
      return this.viewList[this.activeTab]
    }
  },
  created () {
    if (this.$route.query.type) {
      this.activeTab = this.$route.query.type
    }
    // this.getSystemMessage()
  },
  methods: {
  }
}
</script>
<style lang="scss">
.notice {
  .activeTab {
    color: #f04e2d;
    outline: none;
  }
}
</style>
